<template>
  <div>
    <header
      :style="{ backgroundImage: 'url(' + list.avatar + ')', backgroundSize: '100%' }"
    >
      <div class="box">
        <div class="boxOne">
          <img :src="list.avatar" align="left" />
          <p>
            <img src="@/assets/img/brand@2x.png" />
            {{ list.name }}
          </p>
          <p>
            {{ list.description + "/" + list.deliveryTime + "分钟送达" }}
          </p>
          <p>
            <img src="@/assets/img/decrease_1@2x.png" alt="" />
            {{ list.supports[0].description + " , 满50减10" }}
          </p>
        </div>
        <p class="message">
          <img src="@/assets/img/bulletin@2x.png" />
          <span class="intro">
            {{ list.bulletin }}
          </span>
          <span class="Triangle" @click="show = true"></span>
        </p>
      </div>
    </header>
    <!-- 导航 -->
    <el-menu class="el-menu-demo" mode="horizontal" router>
      <el-menu-item index="goods">商品</el-menu-item>
      <el-menu-item index="appraise">评价</el-menu-item>
      <el-menu-item index="shops">商家</el-menu-item>
    </el-menu>
    <!-- 内容 -->
    <section>
      <routerView />
    </section>
    <van-popup v-model="shows" position="bottom" :style="{ height: '50%' }">
      <div
        style="
          background: #ddd;
          padding: 10px 10px;
          color: #888;
          border-bottom: 2px solid #ccc;
        "
      >
        购物车 <span style="float: right; color: blue" @click="remshop">清空</span>
      </div>
      <p v-for="(item, index) in this.$store.state.shopping" :key="index">
        <span style="flex: 1">
          {{ item.name }}
        </span>
        <span style="color: red; margin-right: 15px">
          <small>￥</small>
          <big>
            <strong>{{ item.price }}</strong>
          </big>
        </span>
        <van-stepper v-model="item.num" theme="round" button-size="22" disable-input />
      </p>
    </van-popup>
    <Btn @fot="popup" />

    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <p style="margin-bottom: 10px">
            {{ list.name }}
          </p>
          <p style="margin-bottom: 10px">
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <img src="@/assets/img/star24_off@2x.png" alt="" />
          </p>
          <p style="text-align: center; margin-bottom: 10px">
            <span style="color: #fff">优惠信息</span>
          </p>
          <div class="news">
            <p>
              <img src="@/assets/img/decrease_1@2x.png" alt="" />{{
                list.supports[0].description
              }}
            </p>
            <p>
              <img src="@/assets/img/discount_1@2x.png" alt="" />{{
                list.supports[1].description
              }}
            </p>
            <p>
              <img src="@/assets/img/discount_1@2x.png" alt="" />{{
                list.supports[2].description
              }}
            </p>
            <p>
              <img src="@/assets/img/special_1@2x.png" alt="" />{{
                list.supports[3].description
              }}
            </p>
            <p>
              <img src="@/assets/img/special_1@2x.png" alt="" />{{
                list.supports[4].description
              }}
            </p>

            <p style="text-align: center; margin-bottom: 10px">
              <span style="color: #fff">商家信息</span>
            </p>
            <p>
              {{ list.bulletin }}
            </p>

            <p style="text-align: center; color: #fff">
              <span @click="show = false">X</span>
            </p>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Btn from "@/components/Button/Footer.vue";
export default {
  components: { Btn },
  name: "",
  data() {
    return {
      list: {},
      show: false,
      shows: false,
    };
  },
  mounted() {
    this.$http.get("/json/data.json").then((res) => {
      console.log(res);
      this.list = res.data.seller;
    });
  },
  methods: {
    popup(flag) {
      this.shows = flag;
    },
    // 清空购物车
    remshop() {
      this.$store.commit("removeShopping");
      this.$toast.success("清空购物车成功");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 150px;
  .box {
    width: 100%;
    height: 100%;
    background: rgba($color: #ccc, $alpha: 0.8);
    color: rgba(7, 17, 27, 0.5);
    display: flex;
    flex-direction: column;
    .boxOne {
      margin: 15px 0 15px 15px;
      & > img {
        width: 85px;
        height: 85px;
        margin-right: 15px;
      }
      p:nth-of-type(1) {
        font-size: 20px;
        font-weight: 700;
        color: rgb(255, 255, 255);
        & > img {
          width: 35px;
          height: 22px;
          vertical-align: middle;
        }
      }
      p:nth-of-type(2) {
        color: rgb(255, 255, 255);
        margin-top: 5px;
      }
      p:nth-of-type(3) {
        color: rgb(255, 255, 255);
        margin-top: 5px;
        & > img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
      }
    }
    .message {
      background-color: rgba(7, 17, 27, 0.2);
      flex: 1;
      display: flex;
      align-items: center;
      .intro {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(255, 255, 255);
      }
      .Triangle {
        width: 5px;
        height: 5px;
        border: 1px solid #fff;
        transform: rotate(45deg);
        border-bottom: none;
        border-left: none;
      }
      img {
        height: 20px;
        margin: 0 5px;
      }
    }
  }
}
ul {
  display: flex;
  justify-content: space-between;
  .is-active {
    border-bottom: #fff !important;
  }
}
section {
  height: 455px;
}

.el-dialog__header {
  padding: 0px 0px 0px !important;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 290px;
  & > p:nth-of-type(1) {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  & > p:nth-of-type(2) {
    text-align: center;
    img {
      margin: 0 10px;
    }
  }
  .news {
    img {
      vertical-align: middle;
      margin-right: 5px;
    }
    p {
      color: #ccc;
      margin-bottom: 10px;
    }
  }
}
.van-popup {
  p {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin: 0 10px;
    border-bottom: 1px solid #ddd;
  }
}
</style>
